<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="clearInput"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchCourse"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button
            type="primary"
            @click="goToAdd"
            style="float: right"
            >添加课程</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="course" style="width: 100%">
        <!-- 拓展区 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="课程介绍：">
                <span v-if="props.row.introduction">{{ props.row.introduction }}</span>
                <span v-else>暂无课程介绍</span>
              </el-form-item>
              <el-form-item label="封面图片：">
                <el-image
                  v-if="props.row.cover"
                  style="width: 100px; height: 100px"
                  :src="props.row.cover"
                  :fit="fit"></el-image>
                <span v-else>暂无封面图片</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 表格区 -->
        <el-table-column label="课程名称" prop="name"> </el-table-column>
        <el-table-column label="课程类型" prop="typeInfo.type"> </el-table-column>
        <el-table-column label="教师" prop="teacher"> </el-table-column>
        <el-table-column label="所属机构" prop="organization"></el-table-column>
        <el-table-column label="视频数量" prop="video_num"></el-table-column>
        <el-table-column label="作业数量" prop="homework_num"></el-table-column>
        <el-table-column label="评分" prop="score">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score" disabled></el-rate>
          </template>
        </el-table-column>
        <!-- 操作区域 -->
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="editCourse(scope.row.id)"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #fa6962"
              icon="el-icon-delete"
              size="small"
              @click="removeById(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getCourse, deleteCourse, searchCourse, getUnivById } from '#/CourseManagement/Course.js'
import { addLogs } from '#/Home/Home.js'
export default {
  name: 'Course',
  meta: {
    title: '课程管理'
  },
  data() {
    return {
      queryInfo: {
        query: "",
        pageNum: 1,
        pageSize: 10,
      },
      course: [],
      // 统计课程的总数量
      total: 0,
    };
  },
  created() {
    this.getClass()
  },
  methods: {
    // 获取所有课程
    async getClass() {
      await getCourse(this.queryInfo.pageNum, this.queryInfo.pageSize).then(res => {
        const result = res.data
        console.log(result)
        if(result.ret === 0) {
          this.course = result.courses.courses.content
          this.course.forEach(async e => {
            e.score /= 2
            await getUnivById(e.org_id).then(res => {
              if(res.ret === 0) {
                this.$set(e, 'organization', res.data.yniv.schoolName)
              }
            })
          });
          this.total = result.courses.courses.totalElements
        } else {
          this.$message.error('服务器请求错误！');
        }
      })
    },
    goToAdd() {
      this.$router.push('/CourseManagement/addCourse')
    },
    // 搜索课程
    async searchCourse() {
      if(!this.queryInfo.query) {
        return this.$message.error('请输入名称')
      }
      this.queryInfo.pageNum = 1;
      await searchCourse(this.queryInfo).then(res => {
        if(res.status === 200) {
          this.course = res.data.courses.courses.content
          this.total = res.data.courses.courses.totalElements
          if(this.course === []) {
            this.$message.info('搜索结果为空')
          } else {
            this.$message.success('搜索成功！')
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 清除输入框的内容
    clearInput() {
      this.queryInfo.pageNum = 1;
      this.queryInfo.pageSize = 5;
      this.getClass();
    },
    // 打开编辑课程对话框
    editCourse(id) {
      this.$router.push('/CourseManagement/addCourse?id=' + id)
    },
    // 删除课程
    async removeById(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该课程, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if(confirmResult === 'confirm') {
        await deleteCourse(row.id).then(async res => {
          if(res.status === 200) {
            this.$message.success('成功删除课程！')
            await addLogs({
              userId: window.sessionStorage.getItem('userId'),
              behavior: '删除了《' + row.name + '》课程',
            })
            this.getClass()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    // 每页的条目数改变
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getClass();
    },
    // 页码改变
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getClass();
    },
  },
};
</script>

<style lang='scss' scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .page-content {
    width: 100%;
    height: 100%;
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
</style>